<template>
    <view v-if="company">
        <!-- 这是阿姨端的公司展示 -->
        <view class="nova-column v-box" v-if="role == 1">
            <view class="nova-row-center">
                <view class="v-tit">家政公司</view>
                <view class="v-gdt" @click="showCorpPopup(true)">
                    查看详情
                    <image src="/static/img/gr.png" />
                </view>
            </view>
            <view class="v-det">
                <text>公司名称:</text>
                <text>{{ company.company_name }}</text>
            </view>
            <view class="v-det">
                <text>公司电话:</text>
                <text>{{ company.company_telephone }}</text>
            </view>
            <view class="v-det">
                <text>公司地址:</text>
                <text>{{ company.company_address }}</text>
            </view>
        </view>
        <view v-else>
            <uni-section title="公司信息" :addclasstype="'margin-top:0'"></uni-section>
            <uni-list>
                <uni-list-item
                    :show-arrow="true"
                    title="公司名称"
                    :note="company.company_name"
                    @click="showCorpPopup(true)"
                    :show-badge="true"
                    badge-text="查看详情"
                    badge-type="normal"
                />
                <uni-list-item :show-arrow="false" title="公司电话" :note="company.company_telephone" />
                <uni-list-item :show-arrow="false" title="公司地址" :note="company.company_address" />
            </uni-list>
        </view>
        <uni-popup type="center" ref="corp" class="popup">
            <view class="content nova-column">
                <image class="logo" :src="company.headimg||company.company_logo"></image>
                <text class="title">公司信息</text>
                <view class="nova-column" style="margin-top: 18rpx; margin-bottom: 27rpx;">
                    <text class="desc">{{ getPopContents(company) }}</text>
                </view>
                <view class="nova-row-center">
                    <block v-if="company.authentication">
                        <text class="text-link ctag" v-for="(item, index) in company.authentication" :key="index">{{item.type}}</text>
                    </block>
                </view>
                <image class="close" src="../../static/img/popup-close.png" @click.stop="showCorpPopup(false)"></image>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import uniPopup from '../../components/uni-popup/uni-popup.vue';
import uniSection from '@/components/uni-section/uni-section.vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';

export default {
    name: 'c-company',
    components: {
        uniSection,
        uniList,
        uniListItem,
        uniPopup
    },
    props: {
        company: {
            type: Object,
            default: undefined
        }
    },
    data() {
        return {
            role: this.$global.role
        };
    },
    created() {
        this.role = this.$global.role;
        console.log('company', this.company);
    },
    methods: {
        // 查看公司信息详情弹窗 -- 公司信息数据组织
        getPopContents(c) {
            let arr = [];
            if (c.company_name) {
                arr.push(`名称：${c.company_name}`);
            }
            if (c.company_telephone) {
                arr.push(`电话：${c.company_telephone}`);
            }
            if (c.company_address) {
                arr.push(`地址：${c.company_address}`);
            }
            if (c.company_introduce) {
                arr.push(`公司介绍：${c.company_introduce}`);
            }
            return arr.join('\n');
        },
        showCorpPopup(show) {
            this.corpPopup = show;
            if (show) {
                this.$refs.corp.open();
            } else {
                this.$refs.corp.close();
            }
        }
    }
};
</script>

<style lang="scss">
.v-box {
    width: 100%;
    padding: 20rpx 35rpx;
    margin: 10rpx auto;
    border-top: 1px solid #f1f1f1;
    .v-tit {
        font-size: 34rpx;
        margin: 20rpx 0;
    }

    .v-det {
        font-size: 28rpx;
        color: #666666;
        line-height: 44rpx;
    }

    .v-gdt {
        position: absolute;
        right: 50rpx;
        color: #666666;
        font-size: 26rpx;

        image {
            width: 10rpx;
            height: 18rpx;
            margin-left: 8rpx;
        }
    }
}
.popup {
    .content {
        position: relative;
        width: 680rpx;
        margin: 34rpx;
        border-radius: 32rpx;
        background-color: white;
        padding: 120rpx 20rpx 30rpx 34rpx;

        .logo {
            width: 200rpx;
            height: 200rpx;
            border-radius: 100rpx;
            box-shadow: 0 0 1 1 $uni-color-primary;
            position: absolute;
            top: -100rpx;
            left: 240rpx;
        }

        .close {
            width: 68rpx;
            height: 68rpx;
            position: absolute;
            bottom: -100rpx;
            left: 294rpx;
        }

        .title {
            font-size: 36rpx;
            color: #333;
        }

        .desc {
            font-size: 28rpx;
            color: #999;
            line-height: 40rpx;
        }
        .ctag {
            padding: 0 10rpx;
            line-height: 40rpx;
            height: 40rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            border: 1rpx solid $uni-color-primary;
        }
    }
}
.company_style {
    padding: 0 30rpx;
    @extend .v-box;
}
</style>
